<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-affix :offset="10">
          <el-card id="sideBar" style="margin-top: 20px">
            <template #header>
              <div class="card-header"
                   style="display: flex;justify-content: space-between;align-items: center"
                   @click="showCard"
              >
                <div style="font-size: 20px;font-weight: bold;margin: 10px">SNV: {{ASM_detail.pairs.tableData[0].idInDbsnp}}</div>
                <el-icon v-if="card === 0"><ArrowLeftBold /></el-icon>
                <el-icon v-if="card != 0"><ArrowDownBold /></el-icon>
              </div>
            </template>
            <div style="display: flex;justify-content: center;align-items: center;margin: 10px">
              <el-button type="primary" @click="showAll" size="large" plain>Show All</el-button>
              <el-button size="large" @click="collapseAll" plain>Collapse All</el-button>
            </div>
            <div v-if="card">
              <el-card style="max-width: 480px" shadow="never">
                <template #header>
                  <div class="card-header"
                       style="display: flex;justify-content: space-between;align-items: center"
                       @click="showBarCard(0)"
                  >
                    <div style="font-size: 18px;font-weight: bold">ASM detail</div>
                    <el-icon v-if="cardBarSelect != 0"><ArrowLeftBold /></el-icon>
                    <el-icon v-if="cardBarSelect === 0"><ArrowDownBold /></el-icon>
                  </div>
                </template>
                <div class="list-group" :class="current === index?'active':'',cardBarSelect === 0?'':'hidden'"
                     v-for="(item,index) in ASM_detail_list"
                     @click="toactive('ASM_detail',index)"
                >
                  <a class="list-group-item list-group-item-action">
                    <div style="display: flex;align-items: center;">
                      <el-icon><Link /></el-icon>
                      {{ item.key === 'table' ? 'Detail' : "ASM" }}
                    </div>
                    <div class="list-group-num">
                      {{item.num}}
                    </div>
                  </a>
                </div>
              </el-card>
              <el-card style="max-width: 480px" shadow="never">
                <template #header>
                  <div class="card-header"
                       style="display: flex;justify-content: space-between;align-items: center"
                       @click="showBarCard(1)"
                  >
                    <div style="font-size: 18px;font-weight: bold">Cis-regulatory elements</div>
                    <el-icon v-if="cardBarSelect != 1"><ArrowLeftBold /></el-icon>
                    <el-icon v-if="cardBarSelect === 1"><ArrowDownBold /></el-icon>
                  </div>
                </template>
                <div class="list-group" :class="current === index?'active':'',cardBarSelect === 1?'':'hidden'"
                     v-for="(item,index) in Cis_regulatory_elements_list"
                     @click="toactive('Cis_regulatory_elements',index)"
                >
                  <a class="list-group-item list-group-item-action">
                    <div style="display: flex;align-items: center;">
                      <el-icon><Link /></el-icon>
                      {{ item.key.replace(/_/g,' ') }}
                    </div>
                    <div class="list-group-num">
                      {{item.num}}
                    </div>
                  </a>
                </div>
              </el-card>
              <el-card style="max-width: 480px" shadow="never">
                <template #header>
                  <div class="card-header"
                       style="display: flex;justify-content: space-between;align-items: center"
                       @click="showBarCard(2)"
                  >
                    <div style="font-size: 18px;font-weight: bold">TF or other factors binding</div>
                    <el-icon v-if="cardBarSelect != 2"><ArrowLeftBold /></el-icon>
                    <el-icon v-if="cardBarSelect === 2"><ArrowDownBold /></el-icon>
                  </div>
                </template>
                <div class="list-group" :class="current === index?'active':'',cardBarSelect === 2?'':'hidden'"
                     v-for="(item,index) in TF_binding_list"
                     @click="toactive('TF_binding',index)"
                >
                  <a class="list-group-item list-group-item-action">
                    <div style="display: flex;align-items: center;">
                      <el-icon><Link /></el-icon>
                      {{ item.key.replace(/_/g,' ') }}
                    </div>
                    <div class="list-group-num">
                      {{item.num}}
                    </div>
                  </a>
                </div>
              </el-card>
              <el-card style="max-width: 480px" shadow="never">
                <template #header>
                  <div class="card-header"
                       style="display: flex;justify-content: space-between;align-items: center"
                       @click="showBarCard(3)"
                  >
                    <div style="font-size: 18px;font-weight: bold">Associated genes</div>
                    <el-icon v-if="cardBarSelect != 3"><ArrowLeftBold /></el-icon>
                    <el-icon v-if="cardBarSelect === 3"><ArrowDownBold /></el-icon>
                  </div>
                </template>
                <div class="list-group" :class="current === index?'active':'',cardBarSelect === 3?'':'hidden'"
                     v-for="(item,index) in Associated_genes_list"
                     @click="toactive('Associated_genes',index)"
                >
                  <a class="list-group-item list-group-item-action">
                    <div style="display: flex;align-items: center;">
                      <el-icon><Link /></el-icon>
                      {{ item.key.replace(/_/g,' ') === 'Proximal genes' ? 'Adjacent' : item.key.replace(/_/g,' ') === 'interaction genes' ? '3D interaction' : item.key.replace(/_/g,' ') === 'eQTL' ? 'eQTL' :  item.key.replace(/_/g,' ') === 'CpG target genes' ? 'CpG target' : 'Overview' }}
                    </div>
                    <div class="list-group-num">
                      {{item.num}}
                    </div>
                  </a>
                </div>
              </el-card>
              <el-card style="max-width: 480px" shadow="never">
                <template #header>
                  <div class="card-header"
                       style="display: flex;justify-content: space-between;align-items: center"
                       @click="showBarCard(4)"
                  >
                    <div style="font-size: 18px;font-weight: bold">GWAS</div>
                    <el-icon v-if="cardBarSelect != 4"><ArrowLeftBold /></el-icon>
                    <el-icon v-if="cardBarSelect === 4"><ArrowDownBold /></el-icon>
                  </div>
                </template>
                <div class="list-group" :class="current === index?'active':'',cardBarSelect === 4?'':'hidden'"
                     v-for="(item,index) in Disease_list"
                     @click="toactive('Disease',index)"
                >
                  <a class="list-group-item list-group-item-action">
                    <div style="display: flex;align-items: center;">
                      <el-icon><Link /></el-icon>
                      {{ item.key.replace(/_/g,' ') }}
                    </div>
                    <div class="list-group-num">
                      {{item.num}}
                    </div>
                  </a>
                </div>
              </el-card>
            </div>

          </el-card>
        </el-affix>
      </el-col>
      <el-col :span="19">
        <div style="padding: 10px 0px 10px 30px;">
          <!--tip-->
          <div>
            <p style="font-size: 20px;font-weight: bold;text-align: justify">
              * This page contains all annotations of the ASM index SNV
              <span style="color: red">{{ ASM_detail.pairs.tableData[0].idInDbsnp }}</span>
              , including ASM details, associated cis-regulatory elements, genes, transcription factors and GWAS cancer traits.
            </p>
          </div>
          <!--ASM detail-->
          <div id="ASM_detail">
            <el-collapse v-model="showTableCard.ASM_detail">
              <el-collapse-item name="1" class="tableCard" style="width: 100%">
                <template #title>
                  <div class="card-header">
                    <div>ASM detail</div>
                  </div>
                </template>
                <div class="list-detail-group" v-loading="loading.ASM_detail" element-loading-text="Loading ASM details...">

                  <el-tabs type="border-card">
                    <el-tab-pane label="ASM">
                      <el-row>
                        <el-col :span="12">
                          <p style="font-size: 18px;font-weight: bold;display: flex;align-items: center">
                            <el-icon style="font-size: 20px;font-weight: bold"><Collection /></el-icon>
                            Basic information
                          </p>
  <!--                        <el-table-->
  <!--                            style="width: 100%"-->
  <!--                            :data="ASM_detailTableData"-->
  <!--                            :show-header="false"-->
  <!--                            border-->
  <!--                        >-->
  <!--                          <el-table-column-->
  <!--                              v-for="(item, index) in ASM_detailTableHeader"-->
  <!--                              :key="index"-->
  <!--                              :prop="item"-->
  <!--                          >-->
  <!--                          </el-table-column>-->
  <!--                        </el-table>-->
                          <el-descriptions
                              :column="1"
                              size="large"
                              border
                          >
                            <el-descriptions-item width="300" :label="ASM_detail.pairs.column[0].label">
                              <div style="">
                                <el-tooltip
                                    class="box-item"
                                    effect="light"
                                    :content="'<p style=\'width: 400px;max-height: 400px\'>'+ASM_detail.pairs.tableData[0].allSample+'</p>'"
                                    raw-content
                                    placement="top"
                                >
                                  <p style="overflow: hidden;max-width: 250px;text-overflow:ellipsis; ">

                                    {{ ASM_detail.pairs.tableData[0].allSample }}
                                  </p>
                                </el-tooltip>
                              </div>
                            </el-descriptions-item>
                            <el-descriptions-item :label="ASM_detail.pairs.column[1].label">
                              <div style="">
                                 {{ ASM_detail.pairs.tableData[0].chr }}
                              </div>
                            </el-descriptions-item>
                            <el-descriptions-item :label="ASM_detail.pairs.column[2].label">
                              <div style="">
                                {{ ASM_detail.pairs.tableData[0].snpPos }}
                              </div>
                            </el-descriptions-item>
                            <el-descriptions-item :label="ASM_detail.pairs.column[3].label">
                              <div style="">
                                <el-tooltip
                                    class="box-item"
                                    effect="light"
                                    :content="'<p style=\'width: 400px;max-height: 400px\'>'+ASM_detail.pairs.tableData[0].allCpGPos+'</p>'"
                                    raw-content
                                    placement="top"
                                >
                                  <p style="overflow: hidden;max-width: 250px;text-overflow:ellipsis; ">

                                   {{ ASM_detail.pairs.tableData[0].allCpGPos }}
                                  </p>
                                </el-tooltip>
                              </div>
                            </el-descriptions-item>
                            <el-descriptions-item :label="ASM_detail.pairs.column[4].label">
                              <div style="">
                                {{ ASM_detail.pairs.tableData[0].idInDbsnp.slice(0, 2)==='rs'?'Yes':'No' }}
                              </div>
                            </el-descriptions-item>
                            <el-descriptions-item :label="ASM_detail.pairs.column[5].label">
                              <div style="">
                                {{ ASM_detail.pairs.tableData[0].referenceAllele }}
                              </div>
                            </el-descriptions-item>
                            <el-descriptions-item :label="ASM_detail.pairs.column[6].label">
                              <div style="">
                                {{ ASM_detail.pairs.tableData[0].alternateAllele }}
                              </div>
                            </el-descriptions-item>
                            <el-descriptions-item :label="ASM_detail.pairs.column[7].label">
                              <div style="">
                                {{ ASM_detail.pairs.tableData[0].altInDbsnp }}
                              </div>
                            </el-descriptions-item>
                          </el-descriptions>
                        </el-col>
                        <el-col :span="12">
<!--                          <relation :dataSource="state.ASM_detail"></relation>-->
                          <relation-chart v-if="!loading.ASM_detail" :snv="relationData.snv" :plot-data="relationData.plotData"/>
                        </el-col>
                      </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="Detail">
                      <div>
                        <Table_Detail_asm :tableAllData="ASM_detail.table.tableData" :column="ASM_detail.table.column"></Table_Detail_asm>
<!--                        <vxe-grid v-bind="ASM_detailConfig" v-on="ASM_detailEvents">-->
<!--                          <template #ASM_detailDefault="{ row }">-->
<!--                            <span>{{ row.chr+':' + row.cpgPos }}</span>-->
<!--                          </template>-->
<!--                        </vxe-grid>-->
                      </div>
                    </el-tab-pane>

                  </el-tabs>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <!--Cis-regulatory elements-->
          <div id="Cis_regulatory_elements">
            <el-collapse v-model="showTableCard.Cis_regulatory_elements">
              <el-collapse-item name="1" class="tableCard" style="width: 100%">
              <template #title>
                <div class="card-header">
                  <div>Cis-regulatory elements</div>
                </div>
              </template>
              <div class="list-detail-group" v-loading="loading.Cis_regulatory" element-loading-text="Loading regulatory elements...">
                <el-tabs type="border-card">
                  <el-tab-pane label="Enhancer">
                    <div>
                      <Table_Detail :tableAllData="Cis_regulatory_elements.Enhancer.tableData" :column="Cis_regulatory_elements.Enhancer.column"></Table_Detail>
<!--                      <vxe-grid v-bind="EnhancerConfig" v-on="EnhancerEvents">-->
<!--                      </vxe-grid>-->
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="3D interaction">
                    <div>
                      <Table_Detail :tableAllData="Cis_regulatory_elements.Chromation_interaction.tableData" :column="Cis_regulatory_elements.Chromation_interaction.column"></Table_Detail>
<!--                      <vxe-grid v-bind="Chromation_interactionConfig" v-on="Chromation_interactionEvents">-->
<!--                        <template #Anchor1Default="{ row }">-->
<!--                          <span>{{ row.chr + ":" + row.anchor1_start+'-' + row.anchor1_end }}</span>-->
<!--                        </template>-->
<!--                        <template #Anchor2Default="{ row }">-->
<!--                          <span>{{ row.chr + ":"+row.anchor2_start+'-' + row.anchor2_start }}</span>-->
<!--                        </template>-->
<!--                      </vxe-grid>-->
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="Insulator">
                    <div>
                      <Table_Detail :tableAllData="Cis_regulatory_elements.Insulator.tableData" :column="Cis_regulatory_elements.Insulator.column"></Table_Detail>
<!--                      <vxe-grid v-bind="InsulatorConfig" v-on="InsulatorEvents">-->
<!--                      </vxe-grid>-->
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="Accessible chromatin">
                    <div>
                      <Table_Detail :tableAllData="Cis_regulatory_elements.Accessible_chromatin.tableData" :column="Cis_regulatory_elements.Accessible_chromatin.column"></Table_Detail>
<!--                      <vxe-grid v-bind="Accessible_chromatinConfig" v-on="Accessible_chromatinEvents">-->
<!--                      </vxe-grid>-->
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="Super enhancer">
                    <div>
                      <Table_Detail :tableAllData="Cis_regulatory_elements.Super_enhancer.tableData" :column="Cis_regulatory_elements.Super_enhancer.column"></Table_Detail>
<!--                      <vxe-grid v-bind="Super_enhancerConfig" v-on="Super_enhancerEvents">-->
<!--                      </vxe-grid>-->
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="CpG island">
                    <div>
                      <Table_Detail :tableAllData="Cis_regulatory_elements.CpG_island.tableData" :column="Cis_regulatory_elements.CpG_island.column"></Table_Detail>
<!--                      <vxe-grid v-bind="CpG_islandConfig" v-on="CpG_islandEvents">-->
<!--                      </vxe-grid>-->
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-collapse-item>
            </el-collapse>
          </div>
          <!--TF binding-->
          <div id="TF_binding">
            <el-collapse v-model="showTableCard.TF_binding">
              <el-collapse-item name="1" class="tableCard" style="width: 100%">
              <template #title>
                <div class="card-header">
                  <div>TF or other factors ChIP-seq binding</div>
                </div>
              </template>
              <div class="list-detail-group" v-loading="loading.TF_binding" element-loading-text="Loading TF binding data...">
                <Table_Detail :tableAllData="TF_binding.TF_binding.tableData" :column="TF_binding.TF_binding.column"></Table_Detail>

<!--                <vxe-grid v-bind="TF_bindingConfig" v-on="TF_bindingEvents">-->
<!--                </vxe-grid>-->
              </div>
            </el-collapse-item>
            </el-collapse>
          </div>
          <!--Associated genes-->
          <div id="Associated_genes">
            <el-collapse v-model="showTableCard.Associated_genes">
              <el-collapse-item name="1" class="tableCard" style="width: 100%">
              <template #title>
                <div class="card-header">
                  <div>Associated genes</div>
                </div>
              </template>
              <div class="list-detail-group" v-loading="loading.Associated_genes" element-loading-text="Loading associated genes...">
                <el-tabs type="border-card">
                  <el-tab-pane label="Overview">
                    <el-row :gutter="10">
                      <el-col :span="13">
                        <EchartOne :dataSource="state.Associated_genes"></EchartOne>
                      </el-col>
                      <el-col :span="11">
                        <!--                        <p style="font-size: 18px;font-weight: bold;display: flex;align-items: center">-->
                        <!--                          <el-icon style="font-size: 20px;font-weight: bold"><Collection /></el-icon>-->
                        <!--                          Basic information of for the index snv-->
                        <!--                        </p>-->
                        <el-descriptions
                            title="Overview of associated genes"
                            :column="1"
                            size="large"
                            border
                        >
                          <el-descriptions-item width="300" :label="Associated_genes.Overview.column[0].label">
                            <div style="">
                              {{ Associated_genes.Overview.tableData[0].Proximal_genes }}
                            </div>
                          </el-descriptions-item>
                          <el-descriptions-item :label="Associated_genes.Overview.column[1].label">
                            <div style="">
                              {{ Associated_genes.Overview.tableData[0].eQTL }}
                            </div>
                          </el-descriptions-item>
                          <el-descriptions-item :label="Associated_genes.Overview.column[2].label">
                            <div style="">
                              {{ Associated_genes.Overview.tableData[0].CpG_target_genes }}
                            </div>
                          </el-descriptions-item>
                          <el-descriptions-item :label="Associated_genes.Overview.column[3].label">
                            <div style="">
                              {{ Associated_genes.Overview.tableData[0].interaction_genes }}
                            </div>
                          </el-descriptions-item>
                        </el-descriptions>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane label="Adjacent">
                    <div>
                      <Table_Detail :tableAllData="Associated_genes.Proximal_genes.tableData" :column="Associated_genes.Proximal_genes.column"></Table_Detail>
<!--                      <vxe-grid v-bind="Proximal_genesConfig" v-on="Proximal_genesEvents">-->
<!--                      </vxe-grid>-->
                    </div>
                  </el-tab-pane><!--Proximal genes-->
                  <el-tab-pane label="3D interaction">
                    <div>
                      <Table_Detail :table-all-data="Associated_genes.interaction_genes.tableData" :column="Associated_genes.interaction_genes.column"></Table_Detail>
<!--                      <vxe-grid v-bind="interaction_genesConfig" v-on="interaction_genesEvents">-->
<!--                        <template #geneAnchor1Default="{ row }">-->
<!--                          <span>{{ row.anchor1Start+'-' + row.anchor1End }}</span>-->
<!--                        </template>-->
<!--                        <template #geneAnchor2Default="{ row }">-->
<!--                          <span>{{ row.anchor2Start+'-' + row.anchor2End }}</span>-->
<!--                        </template>-->
<!--                      </vxe-grid>-->
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="eQTL">
                    <div>
                      <Table_Detail :tableAllData="Associated_genes.eQTL.tableData" :column="Associated_genes.eQTL.column"></Table_Detail>
<!--                      <vxe-grid v-bind="eQTLConfig" v-on="eQTLEvents">-->
<!--                      </vxe-grid>-->
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="CpG target">
                    <div>
                      <Table_Detail :tableAllData="Associated_genes.CpG_target_genes.tableData" :column="Associated_genes.CpG_target_genes.column"></Table_Detail>
<!--                      <vxe-grid v-bind="CpG_target_genesConfig" v-on="CpG_target_genesEvents">-->
<!--                        <template #PvalueDefault="{ row }">-->
<!--                          <span>{{ row.p_u_test==='1'?'NA': row.p_u_test}}</span>-->
<!--                        </template>-->
<!--                      </vxe-grid>-->
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-collapse-item>
            </el-collapse>
          </div>
          <!--Disease-->
          <div id="Disease">
            <el-collapse v-model="showTableCard.Disease">
              <el-collapse-item name="1" class="tableCard" style="width: 100%">
              <template #title>
                <div class="card-header">
                  <div>GWAS</div>
                </div>
              </template>
              <div class="list-detail-group" v-loading="loading.Disease" element-loading-text="Loading GWAS data...">
<!--                <el-tabs type="border-card">-->

<!--                  <el-tab-pane label="GWAS">-->
                    <div>
                      <Table_Detail :table-all-data="Disease.GWAS.tableData" :column="Disease.GWAS.column"></Table_Detail>
<!--                      <vxe-grid v-bind="GWASConfig" v-on="GWASEvents">-->
<!--                      </vxe-grid>-->
                    </div>
<!--                  </el-tab-pane>-->
<!--                </el-tabs>-->
              </div>
            </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="jsx">
import {useRoute} from "vue-router";
import {reactive,toRefs} from "@vue/reactivity";
import {watch, ref, onMounted} from "vue";
import {relation,EchartOne} from '@/components/chart/index'
import Table from "@/components/table/table.vue"
import Table_Detail from '@/components/table/table_detail.vue'
import Table_Detail_asm from '@/components/table/table_detail_asm.vue'
import api from '@/api/api'
import RelationChart from "@/components/chart/relationChart";

export default {
  name: "detail_page",
  components: {RelationChart, Table,relation,EchartOne,Table_Detail,Table_Detail_asm},
  setup(){
    const route = useRoute()
    const relationData = reactive({
      snv:route.query.snv,
      plotData:[]
    })
    // Data
    const data = reactive({
      ASMID: route.query.ASMID,
      current: ref(null),
      cardBarSelect: ref(0),
      card: ref(1),
      detailShowList: ref([]),
      top: 0,
      showTableCard: {
        ASM_detail: ref([]),
        regulatory_elements_genome_browser: ref([]),
        Cis_regulatory_elements: ref([]),
        TF_binding: ref([]),
        Associated_genes: ref([]),
        Disease: ref([]),
      },
      ASM_detail: {
        pairs:{
          tableData: ref([
            {
              allSample:'',
              sample: '',
              chr: '',
              snpPos: '',
              allCpGPos: '',//需处理数据
              idInDbsnp: '',
              referenceAllele: '',
              alternateAllele: '',
              altInDbsnp: '',
            }
          ]),
          column: [
            {label: 'Sample',prop:'sample'},
            {label: 'Chr',prop:'chr'},
            {label: 'SNV positon',prop:'snpPos'},
            {label: 'CpGs',prop:'allCpGPos'},//需处理数据
            {label: 'SNP',prop:'idInDbsnp'},
            {label: 'Reference allele',prop:'referenceAllele'},
            {label: 'Observed allele',prop:'alternateAllele'},
            {label: 'Alternative alleles in dbSNP',prop:'altInDbsnp'},
          ]
        },
        table:{
          tableData: ref([]),
          column:[
            {name: 'Index SNV',value:'idInDbsnp',href: false},
            {name: 'CpG',value:'cpgPos',href: false},
            {name: 'Ref cov',value:'referenceCoverage',href: false},
            {name: 'Ref meth',value:'referenceMeth',href: false},
            {name: 'Ref β',value:'refBeta',href: false},
            {name: 'Alt cov',value:'alternateCoverage',href: false},
            {name: 'Alt Meth',value:'alternateMeth',href: false},
            {name: 'Alt β',value:'altBeta',href: false},
            {name: 'p-value',value:'pValue',href: false},
            {name: 'q-value',value:'qValue',href: false},
            {name: 'Tissue',value:'sampleInfo.tissue',href: false},
            {name: 'Health status',value:'sampleInfo.healthStatus',href: false},
            {name: 'Sample',value:'sample',href: false},
          ]
        }
      },
      Cis_regulatory_elements:{
        Accessible_chromatin: {
          tableData: ref([]),
          column:[
            {name: 'Chr',value:'chr',href: false},
            {name: 'Start',value: 'start',href: false},
            {name: 'end',value:'end',href: false},
            {name: 'Biosample type',value:'biosample_type',href: false},
            {name: 'Biosample name',value:'biosample_name',href: false},
            {name: 'Tissue ',value:'alternateCoverage',href: false},
            {name: 'Cancer type',value:'cancer_type',href: false},
            {name: 'Source',value:'source',href: false},
          ]
        },
        Super_enhancer:{
          tableData:ref([]),
          column:[
            {name: 'Sample',value:'sample',href: true},
            {name: 'Sample name',value:'sample_name',href: false},
            {name: 'Chr',value:'se_chr',href: false},
            {name: 'Element start',value:'ele_start',href: false},
            {name: 'Element end',value:'ele_end',href: false},
            {name: 'Source',value:'se_source',href: false},
            {name: 'Original',value:'organism',href: false},

          ]
        },
        Enhancer:{
          tableData:ref([]),
          column:[
            {name: 'Chr',value:'chr',href: false},
            {name: 'Start',value:'start',href: false},
            {name: 'End',value:'end',href: false},
            {name: 'Sample',value:'sample',href: false},
            {name: 'Source',value:'source',href: false},
          ]
        },
        Insulator:{
          tableData:ref([]),
          column:[
            {name: 'TF',value:'tf',href: false},
            {name: 'Chr',value:'chr',href: false},
            {name: 'Start',value:'tf_start',href: false},
            {name: 'End',value:'tf_end',href: false},
            {name: 'Sample',value:'sample',href: false},
            {name: 'Data source',value:'data_source',href: false},
            {name: 'ChIP-seq source',value:'chip_seq_source',href: false},
          ]
        },
        Chromation_interaction:{
          tableData:ref([]),
          column:[
            {name: 'Anchor start',value:'anchor1_start',href: false},
            {name: 'Anchor end',value:'anchor1_end',href: false},
            {name: 'Interaction IDs',value:'interaction_id',href: false},
            // {name: 'Tissue',value:'sampleInfo3D.tissue',href: false},
            // {name: 'Sample',value:'sampleInfo3D.sample',href: false},
            // {name: 'Source',value:'sampleInfo3D.source',href: false},
            // {name: 'Source id',value:'sampleInfo3D.souce_id',href: false},

          ]
        },
        CpG_island:{
          tableData:ref([]),
          column:[
            {name: 'CpG',value:'cpg',href: false},
            {name: 'Chr',value:'chr',href: false},
            {name: 'Start',value:'start',href: false},
            {name: 'End',value:'end',href: false},
            {name: 'Source',value:'source',href: false},
          ]
        }, //Transcription_factor
      },
      TF_binding:{
        TF_binding:{
          tableData:ref([]),
          column:[
            {name: 'TF or other factors',value:'tf',href: false,width: "220"},
            {name: 'Chr',value:'chr',href: false,width: "100"},
            {name: 'Start',value:'tf_start',href: false},
            {name: 'End',value:'tf_end',href: false},
            {name: 'Sample name',value:'sample_name',href: false},
            {name: 'Data source',value:'data_source',href: false},
            {name: 'Source id',value:'sample',href: false},
          ]
        },
      },
      Associated_genes:{
        Overview:{
          tableData: ref([{
            Proximal_genes: '',
            eQTL: '',
            CpG_target_genes: '',
            interaction_genes: ''
          }]),
          column: [
            {label: 'Adjacent',prop:'Proximal_genes'},
            {label: 'eQTL',prop:'eQTL'},
            {label: 'CpG target',prop:'CpG_target_genes'},
            {label: '3D interaction',prop:'interaction_genes'},
          ]
        },
        Proximal_genes:{
          tableData:ref([]),
          column:[
            {name: 'Gene',value:'gene',href: false},
            {name: 'Start',value:'start',href: false},
            {name: 'End',value:'end',href: false},
            {name: 'Location type',value:'location_type',href: false},
            {name: 'Detail',value:'detail',href: false}
          ]
        },
        interaction_genes:{
          tableData:ref([]),
          column:[
            {name: 'Gene',value:'gene',href: false},
            {name: 'Type',value: 'type',href: false},
            {name: 'Detail',value:'snv',href: true},
            // {name: 'Interaction tissue',value:'tissu',href: false},
            // {name: 'Interaction sample',value:'sampleInfo',href: false}
          ]
        },
        eQTL:{
          tableData:ref([]),
          column:[
            // {name: 'Distance to tss',value: 'distance_to_tss',href: false},
            // {name: 'MAF',value:'maf',href: false},
            // {name: 'Slope',value:'slope',href: false},
            // {name: 'Slope se',value:'slope_se',href: false},
            // {name: 'P-value nominal',value:'pval_nominal',href: false},
            {name: 'FDR',value:'pval_fdr',href: false},// 保留九位小数
            {name: 'Gene',value:'gene',href: false},
            {name: 'Cell type',value:'celltype',href: false},
            {name: 'GWASID',value:'gwasid',href: false},
            {name: 'Trait',value:'trait',href: false},
          ]
        },
        CpG_target_genes:{
          tableData:ref([]),
          column:[
            {name: 'CpG',value:'cpg',href: false},
            // {name: 'CpG id',value:'cpg_id',href: false},
            {name: 'Gene',value:'gene',href: false},
            {name: 'P-value(u test)',value:'p_u_test',href: false},
            {name: 'Pearson cor',value:'pearson_cor',href: false},
            {name: 'P-value(pearson)',value:'pearson_p',href: false},
            {name: 'Cancer type',value:'cancer_type',href: false},
          ]
        },
      },
      Disease:{
        GWAS:{
          tableData:ref([{gwasId:'',trait:'',es:'',lp:''}]),
          column: [
            {name: 'GWAS ID',value:'gwasId',href: false},
            {name: 'Trait',value:'trait',href: false},
            {name: 'Effect score',value:'es',href: false},
            {name: 'Log P-value',value:'lp',href: false},
          ]
        }
      },
      state: {
        ASM_detail: ref({}),
        Associated_genes: ref({}),
      },
      loading: {
        ASM_detail: ref(true),
        Cis_regulatory: ref(true),
        TF_binding: ref(true),
        Associated_genes: ref(true),
        Disease: ref(true)
      }
    })
    const cardBar = reactive({
      ASM_detail_list:ref([]),
      Cis_regulatory_elements_list: ref([]),
      TF_binding_list: ref([]),
      Associated_genes_list: ref([]),
      Disease_list:ref([])
    })


    // 检索导航栏数目及值
    const searchBar = (e) => {
      cardBar.ASM_detail_list = []
      cardBar.Cis_regulatory_elements_list = []
      cardBar.TF_binding_list = []
      cardBar.Associated_genes_list = []
      cardBar.Disease_list = []
      for (let key in data.ASM_detail){
        if (data.ASM_detail[key.toString()].tableData === undefined){
          var ASM_ob = {key: key,num: null}
        }else {
          var ASM_ob = {key: key,num: ASM_detailConfig.data.length}
          if (ASM_detailConfig.data.length>0){
            data.showTableCard.ASM_detail= ['1']
          }
        }
        console.log('ASM_ob==>', ASM_ob.key)
        cardBar.ASM_detail_list.push(ASM_ob)
      }
      for (let key in data.Cis_regulatory_elements){
        if (data.Cis_regulatory_elements[key.toString()].tableData === undefined){
          var cis_ob = {key: key,num: null}
        }else {
          var name = key + "Config"
          var cis_ob = {key: key,num: eval(name).data.length}
          if (eval(name).data.length>0){
            data.showTableCard.Cis_regulatory_elements= ['1']
          }
        }
        // console.log(cis_ob)
        cardBar.Cis_regulatory_elements_list.push(cis_ob)
      }
      for (let key in data.TF_binding){
        if (data.TF_binding[key.toString()].tableData === undefined){
          var transcription_ob = {key: key,num: null}
        }else {
          var name = key + "Config"
          var transcription_ob = {key: "TF or other factors binding",num: eval(name).data.length}
          if (eval(name).data.length>0){
            data.showTableCard.TF_binding= ['1']
          }
        }
        cardBar.TF_binding_list.push(transcription_ob)
      }
      for (let key in data.Associated_genes){
        if (key.toString() === 'Overview'){
          var associated_ob = {key: key,num: null}
        }else {
          var name = key + "Config"
          var associated_ob = {key: key,num: eval(name).data.length}
          if (eval(name).data.length>0){
            data.showTableCard.Associated_genes= ['1']
          }
        }

        cardBar.Associated_genes_list.push(associated_ob)
      }
      for (let key in data.Disease){
        if (data.Disease[key.toString()].tableData === undefined){
          var Disease_ob = {key: key,num: null}
        }else {
          var name = key + "Config"
          var Disease_ob = {key: key,num: eval(name).data.length}
          if (eval(name).data.length>0){
            data.showTableCard.Disease= ['1']
          }
        }
        // console.log(cis_ob)
        cardBar.Disease_list.push(Disease_ob)
      }
    }

    // 导航条展示
    function toactive(a,num) {
      data.current = num
      console.log(data.current)
      window.scrollTo({
        top: document.getElementById(a).offsetTop - 80,
        behavior: "smooth",
      });
      data.showTableCard[a] = ['1']
    }
    function showBarCard(num){
      data.cardBarSelect = num
    }
    function showCard(a){
      if (data.card===0){
        data.card = 1
      }else {
        data.card = 0
      }
    }
    // 展示所有/收起所有
    const showAll = () => {
      data.showTableCard.ASM_detail= ['1']
      data.showTableCard.Associated_genes= ['1']
      data.showTableCard.Disease= ['1']
      data.showTableCard.Cis_regulatory_elements= ['1']
      data.showTableCard.TF_binding= ['1']
      data.showTableCard.regulatory_elements_genome_browser= ['1']
    }
    const collapseAll = () => {
      data.showTableCard.ASM_detail= []
      data.showTableCard.Associated_genes= []
      data.showTableCard.Disease= []
      data.showTableCard.Cis_regulatory_elements= []
      data.showTableCard.TF_binding= []
      data.showTableCard.regulatory_elements_genome_browser= []
    }


    //// vux table show
    const handlePageData = (table,tabledata) => {
      console.log("handle执行",tabledata)
      table['loading'] = true
      const { pageSize, currentPage } = table['pagerConfig']
      table['pagerConfig'].total = tabledata.length
      table['data'] = tabledata.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      table['loading'] = false
    }

    // ASM_detail
    const ASM_detailConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'Index SNV',field:'idInDbsnp',align: 'center',width: 150},
        {title: 'CpG',align: 'center',width: 150,slots: { default: 'ASM_detailDefault'}},
        {title: 'Ref cov',field:'referenceCoverage',align: 'center',width: 150},
        {title: 'Ref meth',field:'referenceMeth',align: 'center',width: 150},
        {title: 'Ref β',field:'refBeta',align: 'center',width: 150},
        {title: 'Alt cov',field:'alternateCoverage',align: 'center',width: 150},
        {title: 'Alt Meth',field:'alternateMeth',align: 'center',width: 150},
        {title: 'Alt β',field:'altBeta',align: 'center',width: 150},
        {title: 'P-value',field:'pValue',align: 'center',width: 150},
        {title: 'Tissue',field:'sampleInfo.tissue',align: 'center',width: 150},
        {title: 'Health status',field:'sampleInfo.healthStatus',align: 'center',width: 150},
        {title: 'Sample',field:'sample',align: 'center',width: 150},
      ],
      data: ref([])
    })////
    const ASM_detailEvents = {
      pageChange ({ pageSize, currentPage }) {
        ASM_detailConfig.pagerConfig.currentPage = currentPage
        ASM_detailConfig.pagerConfig.pageSize = pageSize
        handlePageData(ASM_detailConfig,data.ASM_detail.table.tableData)
      }
    }
    //CpG_island
    const CpG_islandConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'CpG',field:'cpg',align: 'center'},
        {title: 'Chr',field:'chr',align: 'center'},
        {title: 'Start',field:'start',align: 'center'},
        {title: 'End',field:'end',align: 'center'},
        {title: 'Source',field:'source',align: 'center'},
      ],
      data: ref([])
    })////
    const CpG_islandEvents = {
      pageChange ({ pageSize, currentPage }) {
        CpG_islandConfig.pagerConfig.currentPage = currentPage
        CpG_islandConfig.pagerConfig.pageSize = pageSize
        handlePageData(CpG_islandConfig,data.Cis_regulatory_elements.CpG_island.tableData)
      }
    }
    //Insulator
    const InsulatorConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'TF',field:'tf',align: 'center'},
        {title: 'Chr',field:'chr',align: 'center'},
        {title: 'Start',field:'tf_start',align: 'center'},
        {title: 'End',field:'tf_end',align: 'center'},
        {title: 'Sample name',field:'sample',align: 'center'},
        {title: 'Data source',field:'data_source',align: 'center'},
        {title: 'ChIP-seq source',field:'chip_seq_source',align: 'center'},
      ],
      data: ref([])
    })////
    const InsulatorEvents = {
      pageChange ({ pageSize, currentPage }) {
        InsulatorConfig.pagerConfig.currentPage = currentPage
        InsulatorConfig.pagerConfig.pageSize = pageSize
        handlePageData(InsulatorConfig,data.Cis_regulatory_elements.Insulator.tableData)
      }
    }
    // Chromation_interaction
    const Chromation_interactionConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'Anchor1',align: 'center',slots: { default: 'Anchor1Default'}},
        {title: 'Anchor2',align: 'center',slots: { default: 'Anchor2Default'}},
        {title: 'Experiment',field:'experiment',align: 'center'},
        {title: 'Tissue',field:'tissue',align: 'center'},
        {title: 'Sample',field:'sample',align: 'center'},
        {title: 'Interaction id',field:'interaction_id',align: 'center'},
      ],
      data: ref([])
    })////
    const Chromation_interactionEvents = {
      pageChange ({ pageSize, currentPage }) {
        Chromation_interactionConfig.pagerConfig.currentPage = currentPage
        Chromation_interactionConfig.pagerConfig.pageSize = pageSize
        handlePageData(Chromation_interactionConfig,data.Cis_regulatory_elements.Chromation_interaction.tableData)
      }
    }
    //Super_enhancer
    const Super_enhancerConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'Chr',field:'se_chr',align: 'center'},
        {title: 'Element start',field:'ele_start',align: 'center'},
        {title: 'Element end',field:'ele_end',align: 'center'},
        {title: 'Super enhancer',field:'se',align: 'center'},
        {title: 'Super enhancer sample',field:'sample_name',align: 'center'},
        {title: 'Super enhancer source',field:'se_source',align: 'center'}
      ],
      data: ref([])
    })////
    const Super_enhancerEvents = {
      pageChange ({ pageSize, currentPage }) {
        Super_enhancerConfig.pagerConfig.currentPage = currentPage
        Super_enhancerConfig.pagerConfig.pageSize = pageSize
        handlePageData(Super_enhancerConfig,data.Cis_regulatory_elements.Super_enhancer.tableData)
      }
    }
    //Accessible_chromatin
    const Accessible_chromatinConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'Chr',field:'chr',align: 'center'},
        {title: 'Start',field: 'start',align: 'center'},
        {title: 'end',field:'end',align: 'center'},
        {title: 'Biosample type',field:'referenceMeth',align: 'center'},
        {title: 'Biosample name',field:'sample',align: 'center'},
        {title: 'Tissue ',field:'alternateCoverage',align: 'center'},
        {title: 'Cancer type',field:'alternateMeth',align: 'center'},
        {title: 'Source',field:'source',align: 'center'},
      ],
      data: ref([])
    })////
    const Accessible_chromatinEvents = {
      pageChange ({ pageSize, currentPage }) {
        Accessible_chromatinConfig.pagerConfig.currentPage = currentPage
        Accessible_chromatinConfig.pagerConfig.pageSize = pageSize
        handlePageData(Accessible_chromatinConfig,data.Cis_regulatory_elements.Accessible_chromatin.tableData)
      }
    }
    //Enhancer
    const EnhancerConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'Chr',field:'chr',align: 'center',width: 150},
        {title: 'Start',field:'start',align: 'center',width: 150},
        {title: 'End',field:'end',align: 'center',width: 150},
        {title: 'Sample',field:'sample',align: 'center',showOverflow: true ,width: 350},
        {title: 'Source',field:'source',align: 'center'},
      ],
      data: ref([])
    })////
    const EnhancerEvents = {
      pageChange ({ pageSize, currentPage }) {
        EnhancerConfig.pagerConfig.currentPage = currentPage
        EnhancerConfig.pagerConfig.pageSize = pageSize
        handlePageData(EnhancerConfig,data.Cis_regulatory_elements.Enhancer.tableData)
      }
    }
    // TF_binding
    const TF_bindingConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'TF',field:'tf',align: 'center'},
        {title: 'Chr',field:'chr',align: 'center'},
        {title: 'Start',field:'tf_start',align: 'center'},
        {title: 'End',field:'tf_end',align: 'center'},
        {title: 'Sample name',field:'sample',align: 'center'},
        {title: 'Data source',field:'data_source',align: 'center'},
        {title: 'ChIP-seq source',field:'chip_seq_source',align: 'center'},
      ],
      data: ref([])
    })////
    const TF_bindingEvents = {
      pageChange ({ pageSize, currentPage }) {
        TF_bindingConfig.pagerConfig.currentPage = currentPage
        TF_bindingConfig.pagerConfig.pageSize = pageSize
        handlePageData(TF_bindingConfig,data.TF_binding.TF_binding.tableData)
      }
    }
    // Proximal_genes
    const Proximal_genesConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'Gene',field:'gene',align: 'center',width:150},
        {title: 'Location type',field:'location_type',align: 'center',width:250},
        {title: 'Detail',field:'detail',showOverflow: true ,align: 'center'}
      ],
      data: ref([])
    })////
    const Proximal_genesEvents = {
      pageChange ({ pageSize, currentPage }) {
        Proximal_genesConfig.pagerConfig.currentPage = currentPage
        Proximal_genesConfig.pagerConfig.pageSize = pageSize
        handlePageData(Proximal_genesConfig,data.Associated_genes.Proximal_genes.tableData)
      }
    }
    // interaction_genes
    const interaction_genesConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'Gene',field:'gene',align: 'center'},
        {title: 'Anchor1',align: 'center',slots: { default: 'geneAnchor1Default'}},
        {title: 'Anchor2',align: 'center',slots: { default: 'geneAnchor2Default'}},
        {title: 'Interaction tissue',field:'tissu',align: 'center'},
        {title: 'Interaction sample',field:'sampleInfo',align: 'center'}
      ],
      data: ref([])
    })////
    const interaction_genesEvents = {
      pageChange ({ pageSize, currentPage }) {
        interaction_genesConfig.pagerConfig.currentPage = currentPage
        interaction_genesConfig.pagerConfig.pageSize = pageSize
        handlePageData(interaction_genesConfig,data.Associated_genes.interaction_genes.tableData)
      }
    }
    // eQTL
    const eQTLConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'Gene',field:'gene',align: 'center'},
        {title: 'Distance to tss',align: 'distance_to_tss'},
        {title: 'MAF',field:'maf',align: 'center'},
        {title: 'Slope',field:'slope',align: 'center'},
        {title: 'Slope se',field:'slope_se',align: 'center'},
        {title: 'P-value nominal',field:'pval_nominal',align: 'center'},
        {title: 'FDR',field:'pval_fdr',align: 'center'},// 保留九位小数
        {title: 'Trait',field:'trait',align: 'center'},
      ],
      data: ref([])
    })////
    const eQTLEvents = {
      pageChange ({ pageSize, currentPage }) {
        eQTLConfig.pagerConfig.currentPage = currentPage
        eQTLConfig.pagerConfig.pageSize = pageSize
        handlePageData(eQTLConfig,data.Associated_genes.eQTL.tableData)
      }
    }
    // CpG_target_genes
    const CpG_target_genesConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'CpG',field:'cpg',align: 'center',width: 150},
        {title: 'CpG id',field:'cpg_id',align: 'center'},
        {title: 'Gene',field:'gene',align: 'center',width: 150},
        {title: 'P-value of u test',align: 'center',slots: { default: 'PvalueDefault'},width: 150},
        {title: 'Pearson cor',field:'pearson_cor',align: 'center',width: 150},
        {title: 'P-value of pearson',field:'pearson_p',align: 'center',width: 150},
        {title: 'Cancer type',field:'cancer_type',align: 'center',width: 150},
      ],
      data: ref([])
    })////
    const CpG_target_genesEvents = {
      pageChange ({ pageSize, currentPage }) {
        CpG_target_genesConfig.pagerConfig.currentPage = currentPage
        CpG_target_genesConfig.pagerConfig.pageSize = pageSize
        handlePageData(CpG_target_genesConfig,data.Associated_genes.CpG_target_genes.tableData)
      }
    }
    // GWAS
    const GWASConfig = reactive({
      border: true,
      loading: false,
      width: 700,
      // height: 500,
      exportConfig: {},
      toolbarConfig: {
        export: true
      },
      pagerConfig: {
        total: ref(0),
        currentPage: ref(1),
        pageSize: 14,
        layouts: ['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Total']
      },
      columns: [
        {title: 'Index SNV',field:'idInDbsnp',align: 'center',width: 150},
        {title: 'CpG position',align: 'center',width: 150,slots: { default: 'ASM_detailDefault'}},
        {title: 'Ref coverage',field:'referenceCoverage',align: 'center',width: 150},
        {title: 'Ref meth',field:'referenceMeth',align: 'center',width: 150},
        {title: 'Ref β value',field:'refBeta',align: 'center',width: 150},
        {title: 'Alt coverage ',field:'alternateCoverage',align: 'center',width: 150},
        {title: 'Alt meth',field:'alternateMeth',align: 'center',width: 150},
        {title: 'Alt β value',field:'altBeta',align: 'center',width: 150},
        {title: 'ASM P-value',field:'pValue',align: 'center',width: 150},
        {title: 'Tissue',field:'sampleInfo.tissue',align: 'center',width: 150},
        {title: 'Health status',field:'sampleInfo.healthStatus',align: 'center',width: 150},
        {title: 'Sample',field:'sample',align: 'center',width: 150},
      ],
      data: ref([])
    })
    const GWASEvents = {
      pageChange ({ pageSize, currentPage }) {
        GWASConfig.pagerConfig.currentPage = currentPage
        GWASConfig.pagerConfig.pageSize = pageSize
        handlePageData(GWASConfig,data.Disease.GWAS.tableData)
      }
    }


    // // 纵向表格
    //   const ASM_detailTableHeader = getHeaders(data.ASM_detail.pairs.tableData);
    //   const ASM_detailTableData = getValues(data.ASM_detail.pairs.column,data.ASM_detail.pairs.tableData);
    //   const Associated_genesTableHeader = getHeaders(data.Associated_genes.Overview.tableData);
    //   const Associated_genesTableData = getValues(data.Associated_genes.Overview.column,data.Associated_genes.Overview.tableData);
    //
    // function getHeaders(tableData) {
    //   return tableData.reduce(
    //       (pre, cur, index) => pre.concat(`value${index}`),
    //       ["title"]
    //   );
    // }
    // function getValues(headers,tableData) {
    //   return headers.map((item) => {
    //     return tableData.reduce(
    //         (pre, cur, index) =>
    //             Object.assign(pre, { ["value" + index]: cur[item.prop] }),
    //         { title: item.label }
    //     );
    //   });
    // }

    // 监听
    watch(()=>data.current,(value)=>{
      data.current = value
    })
    watch(()=>data.cardBarSelect,(value)=>{
      data.cardBarSelect = value
    })
    watch(()=>data.detailShowList,(value)=>{
      data.detailShowList = value
      console.log("watch",value)
    })
    watch(()=>data.state.ASM_detail,(value)=>{
      data.state.ASM_detail = value
      console.log("watch state.ASM_detail",value)
    })
    watch(()=>data.state.Associated_genes,(value)=>{
      data.state.Associated_genes = value
    })
    watch(()=>data.Disease.GWAS.tableData,(value)=>{
      data.Disease.GWAS.tableData = value
      console.log("watch state.Disease.GWAS.tableData",value)
    })
    function getASMData(){
      console.log("ASMData")
      //data.ASMID 通过snv查询route.query.snv
      api.Detail.getDetailIntroduction(route.query.snv).then(res => {
        data.loading.ASM_detail = false
        // console.log("ASMData ==> ",res)
        data.ASM_detail.table.tableData = res.data.data
        relationData.plotData = res.data.data
        ASM_detailConfig.pagerConfig.total = res.data.data.length
        handlePageData(ASM_detailConfig,data.ASM_detail.table.tableData)
        let table1 = data.ASM_detail.table.tableData
        let allSample = []
        let CpGPosList = []
        let allCpGPos = []
        let allCpG = []
        let cancerType = []

// 使用 Map 或对象来去重
        const uniqueData = Array.from(
            res.data.data.reduce((map, item) => {
              // 创建一个唯一的键，基于 cpgPos 和 healthStatus
              const key = `${item.cpgPos}-${item.sampleInfo.healthStatus}`;

              // 如果键不存在于 Map 中，则添加它
              if (!map.has(key)) {
                map.set(key, item);
              }
              return map;
            }, new Map()).values()
        );
        for (let i = 0;i < uniqueData.length;i++){
          if (CpGPosList.indexOf(uniqueData[i].cpgPos) === -1){
            CpGPosList.push({cpg: uniqueData[i].cpgPos,cancerType: uniqueData[i].sampleInfo.healthStatus})
            allCpGPos.push(uniqueData[i].cpgPos)
            allCpG.push(uniqueData[i].cpgPos)
            allSample.push(uniqueData[i].sample)
          }
          if (cancerType.indexOf(uniqueData[i].sampleInfo.healthStatus) === -1){
            cancerType.push(uniqueData[i].sampleInfo.healthStatus)
          }
        }
        let detail = [{
          sample: table1[0].sample,
          allSample: allSample.join(","),
          chr: table1[0].chr,
          snpPos: table1[0].snpPos,
          allCpGPos: allCpGPos.join(','),//需处理数据
          idInDbsnp: table1[0].idInDbsnp,
          referenceAllele: table1[0].referenceAllele,
          alternateAllele: table1[0].alternateAllele,
          altInDbsnp: table1[0].altInDbsnp,
        }]
        data.ASM_detail.pairs.tableData=detail
        // console.log("ASMData ==> ",CpGPosList,cancerType)

        data.state.ASM_detail = {
          center: table1[0].idInDbsnp,
          nodes: CpGPosList,
          cancerType: cancerType
        }
        searchBar()
        //Associated_genes
        setTimeout(() => {
          api.Detail.getAssociatedGenes(detail[0].idInDbsnp,detail[0].allCpGPos).then(resp => {
            let response = resp.data
            console.log("Associated Genes API Response:", response)
            
            data.Associated_genes.Proximal_genes.tableData = response.ProximalGenes
            data.Associated_genes.eQTL.tableData = response.EqtlFilt
            data.Associated_genes.CpG_target_genes.tableData = response.CpgTargetGenes
            data.Associated_genes.interaction_genes.tableData = response.InteractionGenes
            
            console.log("Processed Gene Lists:", {
              ProximalGenes: data.Associated_genes.Proximal_genes.tableData,
              eQTL: data.Associated_genes.eQTL.tableData,
              CpgTargetGenes: data.Associated_genes.CpG_target_genes.tableData,
              InteractionGenes: data.Associated_genes.interaction_genes.tableData
            })
            Proximal_genesConfig.pagerConfig.total = response.ProximalGenes.length
            eQTLConfig.pagerConfig.total= response.EqtlFilt.length
            CpG_target_genesConfig.pagerConfig.total= response.CpgTargetGenes.length
            interaction_genesConfig.pagerConfig.total = response.InteractionGenes.length
            handlePageData(CpG_target_genesConfig,data.Associated_genes.CpG_target_genes.tableData)
            handlePageData(interaction_genesConfig,data.Associated_genes.interaction_genes.tableData)
            handlePageData(eQTLConfig,data.Associated_genes.eQTL.tableData)
            handlePageData(Proximal_genesConfig,data.Associated_genes.Proximal_genes.tableData)
            let ProximalGeneList = []
            let CpGTargetGeneList = []
            let interactionGeneList = []
            let eQTLGeneList = []
            let cpgLinks = []
            if (data.Associated_genes.Proximal_genes.tableData.length){
              for (let i = 0; i < data.Associated_genes.Proximal_genes.tableData.length; i++) {
                if (ProximalGeneList.indexOf(data.Associated_genes.Proximal_genes.tableData[i].gene) === -1){
                  ProximalGeneList.push(data.Associated_genes.Proximal_genes.tableData[i].gene)
                }
              }
            }

            if (data.Associated_genes.eQTL.tableData.length > 0){
              for (let i = 0; i < data.Associated_genes.eQTL.tableData.length; i++) {
                if (eQTLGeneList.indexOf(data.Associated_genes.eQTL.tableData[i].gene) === -1){
                  eQTLGeneList.push(data.Associated_genes.eQTL.tableData[i].gene)
                }
              }
            }
           if (data.Associated_genes.CpG_target_genes.tableData.length >0){
             for (let i = 0; i < data.Associated_genes.CpG_target_genes.tableData.length; i++) {
               if (CpGTargetGeneList.indexOf(data.Associated_genes.CpG_target_genes.tableData[i].gene) === -1){
                 CpGTargetGeneList.push(data.Associated_genes.CpG_target_genes.tableData[i].gene)
                 cpgLinks.push({
                   cpg: data.Associated_genes.CpG_target_genes.tableData[i].cpg_pos,
                   gene: data.Associated_genes.CpG_target_genes.tableData[i].gene
                 })
               }
             }
           }
           if(data.Associated_genes.interaction_genes.tableData.length > 0){
             for (let i = 0; i < data.Associated_genes.interaction_genes.tableData.length; i++) {
               if (interactionGeneList.indexOf(data.Associated_genes.interaction_genes.tableData[i].gene) === -1){
                 interactionGeneList.push(data.Associated_genes.interaction_genes.tableData[i].gene)
               }
             }
           }

            data.Associated_genes.Overview.tableData = [{
              Proximal_genes: ProximalGeneList.join(',')===''?'NA':ProximalGeneList.join(','),
              eQTL: eQTLGeneList.join(',')===''?'NA':eQTLGeneList.join(','),
              CpG_target_genes: CpGTargetGeneList.join(',')===''?'NA':CpGTargetGeneList.join(','),
              interaction_genes: interactionGeneList.join(',')===''?'NA':interactionGeneList.join(',')
            }]
            console.log("ASMData ==> ",data.Associated_genes.Overview.tableData)

            data.state.Associated_genes = {
              snv: data.ASM_detail.pairs.tableData[0].idInDbsnp,
              cpgs: allCpG.join(","),
              Proximal: ProximalGeneList.length > 0 ? ProximalGeneList.join(',') : '',
              interaction: interactionGeneList.length > 0 ? interactionGeneList.join(',') : '',
              eQTL: eQTLGeneList.length > 0 ? eQTLGeneList.join(',') : '',
              CpgTarget: CpGTargetGeneList.length > 0 ? CpGTargetGeneList.join(',') : '',
              cpgLinks: cpgLinks
            }
            console.log("Final state.Associated_genes:", data.state.Associated_genes)
            searchBar()
            data.loading.Associated_genes = false
          }).catch(() => {
            data.loading.Associated_genes = false
          })
        }, 500)
        // CisAndTFbinding
        setTimeout(() =>{
          api.Detail.getCisAndTFbinding(detail[0].idInDbsnp,detail[0].allCpGPos,detail[0].chr).then(resp => {
            let response = resp.data
            data.Cis_regulatory_elements.Chromation_interaction.tableData = response.Interaction
            data.Cis_regulatory_elements.Enhancer.tableData = response.enhancers
            data.Cis_regulatory_elements.Insulator.tableData = response.Insolutor
            data.Cis_regulatory_elements.Accessible_chromatin.tableData = response.AccessibleChromatin
            data.Cis_regulatory_elements.Super_enhancer.tableData = response.SuperEnhancer
            data.Cis_regulatory_elements.CpG_island.tableData = response.CpgIsland
            data.TF_binding.TF_binding.tableData = response.TFbinding
            // 统计数量
            Chromation_interactionConfig.pagerConfig.total = response.Interaction.length
            EnhancerConfig.pagerConfig.total = response.enhancers.length
            InsulatorConfig.pagerConfig.total= response.Insolutor.length
            Accessible_chromatinConfig.pagerConfig.total= response.AccessibleChromatin.length
            Super_enhancerConfig.pagerConfig.total= response.SuperEnhancer.length
            CpG_islandConfig.pagerConfig.total= response.CpgIsland.length
            TF_bindingConfig.pagerConfig.total= response.TFbinding.length
            handlePageData(Chromation_interactionConfig,data.Cis_regulatory_elements.Chromation_interaction.tableData)
            handlePageData(EnhancerConfig,data.Cis_regulatory_elements.Enhancer.tableData)
            handlePageData(InsulatorConfig,data.Cis_regulatory_elements.Insulator.tableData)
            handlePageData(Accessible_chromatinConfig,data.Cis_regulatory_elements.Accessible_chromatin.tableData)
            handlePageData(Super_enhancerConfig,data.Cis_regulatory_elements.Super_enhancer.tableData)
            handlePageData(CpG_islandConfig,data.Cis_regulatory_elements.CpG_island.tableData)
            handlePageData(TF_bindingConfig,data.TF_binding.TF_binding.tableData)
            searchBar()
            data.loading.Cis_regulatory = false
            data.loading.TF_binding = false
          }).catch(() => {
            data.loading.Cis_regulatory = false
            data.loading.TF_binding = false
          })
        },500)
        setTimeout(() => {
          api.Detail.getDetailGWAS(detail[0].idInDbsnp).then(res => {
            data.Disease.GWAS.tableData = res.data.gwas
            GWASConfig.data = res.data.gwas
            searchBar()
            data.loading.Disease = false
          }).catch(() => {
            data.loading.Disease = false
          })
        },500)
      }).catch(() => {
        data.loading.ASM_detail = false
      })
    }
    // setTimeout(() => {getASMData()}, 500)
    onMounted(()=>{
      getASMData()
    })
    // searchBar()
    return {
      ...toRefs(data),
      ...toRefs(cardBar),
      relationData,
      toactive,showBarCard,showCard,
      showAll,collapseAll,
      // getHeaders,
      // getValues,
      //
      // ASM_detailTableHeader,ASM_detailTableData,
      // Associated_genesTableHeader,Associated_genesTableData,

      ASM_detailEvents,ASM_detailConfig,
      GWASEvents,GWASConfig,
      CpG_target_genesEvents,CpG_target_genesConfig,
      CpG_islandConfig,CpG_islandEvents,
      Chromation_interactionConfig,Chromation_interactionEvents,
      Accessible_chromatinConfig,Accessible_chromatinEvents,
      InsulatorConfig,InsulatorEvents,
      EnhancerConfig,EnhancerEvents,
      Super_enhancerConfig,Super_enhancerEvents,
      eQTLConfig,eQTLEvents,
      interaction_genesEvents,interaction_genesConfig,
      TF_bindingConfig,TF_bindingEvents,
      Proximal_genesConfig,Proximal_genesEvents
    }
  }
}
</script>

<style scoped>
::v-deep #sideBar .el-card__body{
  padding: 0;
}
::v-deep .el-card__header{
  padding: 8px;
}
::v-deep .tableCard .el-card__header{
  background-color: #587ebd;
  color: white;
}
.card-header{
  padding: 10px;
  font-weight: bold;
  font-size: 20px;
}
.tableCard{
  margin: 10px 0;
}
.list-group.hidden {
  display: none;
}
.list-group.active {
  background-color: #587ebd !important;
  color: white !important;
}
/*.list-group.active .list-group-num{*/
/*  border-radius: 25px;*/
/*  background-color: white;*/
/*  color: black;*/
/*}*/
.list-group:hover {
  background-color: #f7f7f7;
}
.list-group-item {
  font-size: 18px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-group{
  height: 40px;
  padding: 10px;
  display: flex;
  align-items: center;
}
.list-detail-group{
  padding: 10px 0;
  min-height: 200px;
}
::v-deep .tableCard .el-card__body{
  padding: 0;
}
::v-deep .el-collapse-item__header{
  height: 56px;
  background-color: #2185d0;
  color: white;
  border-radius: 2px;
  border-bottom: 0;
}
::v-deep .el-collapse-item{
  border-radius: 5px;
  margin-top: 20px;
  border: solid 2px #2185d0;
}
</style>
